<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts ajax加载</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
  </head>
  <body>

    <div id="main" style="width:600px;height:400px;">

    </div>
    若在Chrome浏览器下 想要访问本地的data.json文件必须开起一个本地的虚拟服务器以http开头
    <br>
    <a href="https://www.cnblogs.com/leoxuan/p/6513591.html">原文博客地址：https://www.cnblogs.com/leoxuan/p/6513591.html</a>
    <script>
    var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量','总额度']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    },
      {
        name: '总额度',
        type: 'bar',
        data: []
      }
  ]
});

// 异步加载数据
$.get('http://localhost:8082/echartsDemo/example/data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.name
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        },{
          name: '总额度',
          data: data.data
        }]
    });
});
    </script>
  </body>
</html>
